/*
 * @Description: 树结构评论（递归渲染）
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-06-21 14:42:25
 * @LastEditTime: 2024-06-25 09:57:18
 */
import { toRefs, inject } from "../../utils/vue.esm.js"
import CommentForm from "./commentForm.js"

const template = /*html*/ `
<ul class="comment-list">
  <li v-for="(item, index) in myComments" 
    :key="item.comment_ID"
    class="comment-item" 
    :class="{last: index===commentsNumber-1 && comments.length >= commentsNumber}"
    >
    <div class="avatar">
      <img :src="item.avatar_src">
    </div>
    <div class="data" :class="{reply: item.comment_ID === showReplyFormId}">
      <div class="user">
        <div class="l">
          <span class="name">{{item.comment_author}}</span>
          <span class="time">{{item.time_ago}}</span>
          <span class="floor">{{item.floor}}</span>
        </div>
        <div v-show="item.comment_ID !== showReplyFormId" class="r">
          <span class="reply btn" @click="bindReplyTap(item)">回复</span>
        </div>
      </div>
      <div class="content">
        <div v-if="item.parent_author">@{{item.parent_author}}</div>
        <div v-html="item.comment_content" />
      </div>
      <CommentForm v-if="item.comment_ID === showReplyFormId" 
        :requireNameEmail="requireNameEmail" 
        :haveComments="haveComments" 
        :commentsNumber="commentsNumber" 
        :isFocus="true"
        :isReply="true"
        :parentId="item.comment_ID"
        @cancelReply="cancelReply(item)"
        @createEnd="createCommentEnd" 
      />
    </div>
    <CommentTreeList 
      v-if="item.child_list.length"
      :myComments="item.child_list" 
      :commentsNumber="commentsNumber"
      :requireNameEmail="requireNameEmail"
      :haveComments="haveComments"
      :comments="comments"
      :parentIds="[...parentIds, item.comment_ID]"
      @closeMainCommentForm="$emit('closeMainCommentForm')"
      @openMainCommentForm="$emit('openMainCommentForm')"
    />
  </li>
</ul>
`

export default {
  name: "CommentTreeList",
  components: { CommentForm },
  template,
  emits: ["closeMainCommentForm", "openMainCommentForm"],
  props: [
    "myComments",
    "commentsNumber",
    "requireNameEmail",
    "haveComments",
    "comments",
    "parentIds",
  ],
  setup (props, context) {
    const {
      myComments,
      commentsNumber,
      requireNameEmail,
      haveComments,
      comments,
      parentIds,
    } = toRefs(props)

    // 待回复的父评论ID
    const showReplyFormId = inject('showReplyFormId')

    // 回复
    const bindReplyTap = (comment) => {
      showReplyFormId.value = comment.comment_ID
      context.emit("closeMainCommentForm")
    }

    // 取消回复
    const cancelReply = () => {
      showReplyFormId.value = ''
      context.emit("openMainCommentForm")
    }

    // 创建回复
    const createCommentEnd = (comment) => {
      const copyParentIds = JSON.parse(JSON.stringify(parentIds.value))
      commentsNumber.value++
      if (comment.comment_parent && comment.comment_parent !== "0") {
        const parentComment = getChildCommentById(
          comments.value,
          copyParentIds,
          comment.comment_parent
        )

        if (parentComment) {
          parentComment.child_list.push(comment)
          // 关闭输入框
          cancelReply(parentComment)
        }
      }
    }

    return {
      myComments,
      commentsNumber,
      requireNameEmail,
      haveComments,
      comments,
      bindReplyTap,
      cancelReply,
      createCommentEnd,
      showReplyFormId,
    }
  },
}

// 查找父节点
function getChildCommentById (comments, parentIds, currParentId) {
  if (parentIds.length) {
    // 使用shift取数组头部值，按顺序依次查找父节点
    const shiftPatentId = parentIds.shift()
    const comment = comments.find((item) => item.comment_ID === shiftPatentId)

    if (!comment) {
      return
    }
    return getChildCommentById(comment.child_list, parentIds, currParentId)
  } else {
    return comments.find((item) => item.comment_ID === currParentId)
  }
}
